<template>
    <div>
        <!-- 列表页面 -->
        <el-button type="success" round @click="openEditUI(null)">新增证件</el-button>
        <template>
            <el-table
                :data="credentialsData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
                <el-table-column v-for='item in formInptList[typeid - 1]' :label=item.label :prop=item.name>
                </el-table-column>
                <el-table-column align="right">
                    <!-- <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template> -->
                    <template slot-scope="scope">
                        <el-button size="mini" @click="openEditUI(scope.row.id)">修改</el-button>

                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 列表页面 -->

        <!-- 添加证件 -->
        <el-dialog @close="clearForm" :title="formTitle" id="addUser" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="formRef">
                <el-form-item v-for="item in formInptList[typeid - 1]" :label="item.label" :prop="item.name"
                    :name="item.name">

                    <el-input v-model="form[item.name]" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCredentials">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加证件 -->
    </div>
</template>
  
<script>
import ProjectApi from '@/api/project'

export default {
    // watch: {
    //     typeid:{
    //         handler(newVal){
    //             this.$store.dispatch('user/setText',newVal);
    //             alert(123)
    //         },
    //         immediate:true,
    //     }
    // },
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            formTitle: '',
            form: {
                typeid: this.typeid,
                project_id: this.project_id,
            },
            formInptList: [
                //1
                [
                    { label: '项目名称', name: 'a' },
                    { label: '建设地点', name: 'b' },
                    { label: '建设规模', name: 'c' },
                    { label: '总投资', name: 'd' },
                    { label: '发证日期', name: 'e' },
                    { label: '建设起止年限', name: 'f' },
                    { label: '主要建设内容', name: 'g' },
                ],
                //2
                [
                    { label: '土地受让人', name: 'a' },
                    { label: '座落', name: 'b' },
                    { label: '地类（用途）', name: 'c' },
                    { label: '宗地面积㎡', name: 'd' },
                    { label: '土地交付日期', name: 'e' },
                    { label: '出让价格/元', name: 'f' },
                    { label: '政策要求', name: 'g' },
                    { label: '保障住房比例', name: 'h' },
                    { label: '装修要求', name: 'i' },
                    { label: '配套设施', name: 'j' },
                    { label: '最大容积率', name: 'l' },
                    { label: '其他', name: 'k' },
                ],
                //3
                [
                    { label: '权利人', name: 'a' },
                    { label: '面积㎡', name: 'b' },
                    { label: '共有情况', name: 'c' },
                    { label: '使用期限', name: 'd' },
                    { label: '坐落', name: 'e' },
                    { label: '不动产单元号', name: 'f' },
                    { label: '权利类型', name: 'g' },
                    { label: '用途', name: 'h' },
                ],
                //4
                [
                    { label: '土地使用权人', name: 'a' },
                    { label: '座落', name: 'b' },
                    { label: '土地使用证号', name: 'c' },
                    { label: '地号', name: 'd' },
                    { label: '图号', name: 'e' },
                    { label: '地类（用途）', name: 'f' },
                    { label: '取得价格/元', name: 'g' },
                    { label: '使用权类型', name: 'h' },
                    { label: '取得日期', name: 'i' },
                    { label: '使用权面积', name: 'j' },
                    { label: '终止日期', name: 'l' },
                ],
                //5
                [
                    { label: '用地单位', name: 'a' },
                    { label: '用地项目名称', name: 'b' },
                    { label: '用地位置', name: 'c' },
                    { label: '用地性质', name: 'd' },
                    { label: '用地面积㎡', name: 'e' },
                    { label: '建设规模', name: 'f' },
                    { label: '发证日期', name: 'g' },
                ],
                //6
                [
                    { label: '建设单位', name: 'a' },
                    { label: '建设项目名称', name: 'b' },
                    { label: '建设位置', name: 'c' },
                    { label: '建设规模', name: 'd' },
                    { label: '建设总规模', name: 'e' },
                    { label: '计容面积㎡', name: 'f' },
                    { label: '发证日期', name: 'g' },
                ],
                //7
                [
                    { label: '建设单位', name: 'a' },
                    { label: '工程名称', name: 'b' },
                    { label: '建设规模', name: 'c' },
                    { label: '建设地址', name: 'd' },
                    { label: '设计单位', name: 'e' },
                    { label: '合同价格/元', name: 'f' },
                    { label: '施工单位', name: 'g' },
                    { label: '合同开工日期', name: 'h' },
                    { label: '监理单位', name: 'i' },
                    { label: '合同竣工日期', name: 'j' },
                    { label: '实际开工日期', name: 'l' },
                    { label: '发证日期', name: 'k' },
                ],
                //8
                [
                    { label: '项目名称', name: 'a' },
                    { label: '房屋坐落', name: 'b' },
                    { label: '有效期', name: 'c' },
                    { label: '发证日期', name: 'd' },
                    { label: '资金监管银行', name: 'e' },
                    { label: '资金监管账户', name: 'f' },
                    { label: '证件编号', name: 'g' },
                ],
                //9
                [
                    { label: '建设工程名称', name: 'a' },
                    { label: '建筑面积㎡', name: 'b' },
                    { label: '建设单位', name: 'c' },
                    { label: '总投资', name: 'd' },
                    { label: '备案日期', name: 'e' },
                    { label: '结构、层数', name: 'f' },
                    { label: '开、竣工日期', name: 'g' },
                    { label: '施工单位', name: 'h' },
                    { label: '设计单位', name: 'i' },
                    { label: '监理单位', name: 'j' },
                    { label: '审图单位', name: 'l' },
                    { label: '勘察单位', name: 'k' },
                ],


            ],
            credentialsData: [],
            search: ''
        }
    },
    methods: {

        handleDelete(id) {

            ProjectApi.delCredentialById(id).then(response => {
                this.$message({
                    message: response.message,
                    type: 'success'
                });
                this.getCredentials()
            })
        },

        //打开添加/修改证件弹窗
        openEditUI(id) {
            if (id == null) {
                this.formTitle = "新增证件信息";
            } else {
                this.formTitle = "修改证件信息";
                //根据id获取证件信息
                ProjectApi.getCredentialById(id).then(response => {
                    this.form = response.data.info;
                })
            }
            this.dialogFormVisible = true;
        },

        //添加/修改证件
        saveCredentials() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {

                    ProjectApi.saveCredentials(this.form).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });

                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        },

        clearForm() {
            this.form = {};
            this.$refs.formRef.clearValidate();
        },
        getCredentials() {
            ProjectApi.getProjectCredentials(this.project_id, this.typeid).then(response => {
                this.credentialsData = response.data.list;
            })

        }
    },
    props: {
        'project_id': String,
        'typeid': Number,
    },
    watch: {
        typeid(newVal, oldVal) {
            alert(newVal)
        }
    },
    created() {
        this.getCredentials();
    }



}
</script>
  
<style></style>